<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import type { ModeItem } from '../type'
import VerifyModal from './VerifyModal.vue'
import { listUserSocial, socialAuth, unbindSocialAccount } from '@/apis'

const socialList = ref<any>([])
const modeList = ref<ModeItem[]>([])

// 初始化数据
const initData = () => {
  listUserSocial().then((res) => {
    socialList.value = res.map(el => el.source)
    modeList.value = [
      {
        title: '绑定 微信',
        icon: 'icon-wechat',
        subtitle: `${socialList.value.includes('wechat_open') ? '' : '绑定后，'}可通过微信进行登录`,
        jumpMode: 'link',
        type: 'wechat_open',
        status: socialList.value.includes('wechat_open'),
        statusString: '',
      },
      {
        title: '绑定企业微信',
        icon: 'icon-wechat',
        subtitle: `${socialList.value.includes('wechat_enterprise') ? '' : '绑定后，'}可通过企业微信进行登录`,
        jumpMode: 'link',
        type: 'wechat_enterprise',
        status: socialList.value.includes('wechat_enterprise'),
        statusString: '',
      },
    ]
  })
}

// 绑定
const onBinding = (type: string, status: boolean) => {
  if (!status) {
    socialAuth(type).then((res) => {
      window.open(res.authorizeUrl, '_self')
    })
  } else {
    unbindSocialAccount(type).then(() => {
      initData()
      Message.success('解绑成功')
    })
  }
}

const verifyModalRef = ref<InstanceType<typeof VerifyModal>>()
// 修改
const onUpdate = (type: string) => {
  verifyModalRef.value?.open(type)
}

onMounted(() => {
  initData()
})
</script>

<template>
  <a-card title="第三方账号" bordered class="gradient-card">
    <div v-for="item in modeList" :key="item.title">
      <div class="item">
        <div class="icon-wrapper">
          <a-image v-if="item.icon === 'gitee'" src="../src/assets/images/gitee.png" style="width: 26px" />
          <ProIcon v-else :icon="item.icon" :size="26" />
        </div>
        <div class="info">
          <div class="info-top">
            <span class="label">{{ item.title }}</span>
            <span class="bind">
              <icon-check-circle-fill v-if="item.status" :size="14" class="success" />
              <icon-exclamation-circle-fill v-else :size="14" class="warning" />
              <span style="font-size: 12px" :class="item.status ? 'success' : 'warning'">{{
                item.status ? '已绑定' : '未绑定'
              }}</span>
            </span>
          </div>
          <div class="info-desc">
            <span class="value">{{ item.value }}</span>
            {{ item.subtitle }}
          </div>
        </div>
        <div class="btn-wrapper">
          <a-button
            v-if="item.jumpMode === 'modal'"
            class="btn"
            :type="item.status ? 'secondary' : 'primary'"
            @click="onUpdate(item.type)"
          >
            {{ item.status ? '修改' : '绑定' }}
          </a-button>
          <a-button
            v-else-if="item.jumpMode === 'link'"
            class="btn"
            :type="item.status ? 'secondary' : 'primary'"
            @click="onBinding(item.type, item.status)"
          >
            {{ item.status ? '解绑' : '绑定' }}
          </a-button>
        </div>
      </div>
    </div>
  </a-card>
  <VerifyModal ref="verifyModalRef" />
</template>

<style lang="less" scoped>
.gradient-card {
  border-radius: 8px;
  border: 1px solid var(--color-neutral-3);
}

.gradient-card .item {
  align-items: center;
  display: flex;
  margin-bottom: 20px;
}

.icon-wrapper {
  align-items: center;
  background: var(--color-neutral-2);
  border-radius: 50%;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.info {
  flex: 1 1;
  margin: 0 16px;
  .info-top {
    margin-bottom: 4px;
    .label {
      font-weight: 500;
      line-height: 22px;
      margin-right: 12px;
    }

    .bind {
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
    }
  }

  .info-desc {
    color: #86909c;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;

    .value {
      color: #4e5969;
    }
  }
}

.btn-wrapper {
  align-self: flex-start;
  .btn {
    height: 28px;
    width: 56px;
  }
}
</style>
